import React, {Component} from 'react'
import {render} from 'react-dom'
    // const { Map, Marker } = window.ReactBMap;
import {Map, Marker, NavigationControl, InfoWindow,ScaleControl,
  OverviewMapControl,MapTypeControl,
  Polyline,Circle,Polygon,
MarkerList,
Boundary,
Road,
MapvLayer,
TrafficLayer} from 'react-bmap';


export default class bdMap extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    this.init()
  }

  init() {}

  render() {
    let mapConfig = {
      boxW: '500px',
      boxH: '300px',
    }
    return (
      <div className='bdMap'>
        
        <Map center={{lng: 116.402544, lat: 39.928216}} zoom="12" position={{lng: 116.402544, lat: 39.928216}} >
            <Marker position={{lng: 116.402544, lat: 39.928216}} />
          <NavigationControl /> 
          <InfoWindow position={{lng: 116.402544, lat: 39.928216}} text="内容" title="标题"/>
            
          <MapTypeControl />
          <ScaleControl />
          <OverviewMapControl />

          <Polyline 
              strokeColor='green' 
              path={[
                  {lng: 116.403119, lat: 39.929543},
                  {lng: 116.265139, lat: 39.978658},
                  {lng: 116.217996, lat: 39.904309}
              ]}
          />
          <Polygon 
              fillColor='red' 
              strokeColor='yellow' 
              path={[
                  {lng: 116.442519, lat: 39.945597},
                  {lng: 116.484488, lat: 39.905315},
                  {lng: 116.443094, lat: 39.886494},
                  {lng: 116.426709, lat: 39.900001}
              ]}
          />

    <MarkerList 
        data={[
            {
                text: "长沙大道",
                location: "113.22183,28.191712"
            },
            {
                text: "机场高速",
                location: "113.057565,28.175208"
            }
        ]} 
        fillStyle="#ff3333" 
        animation={true} 
        isShowShadow={false} 
        multiple={true} 
        autoViewport={true}
    />

    <Circle 
        center={{lng: 116.403119, lat: 39.929543}} 
        fillColor='blue' 
        strokeColor='white' 
        radius="3000"
    />


    <Boundary data={[
        {
            name: '海淀区',
            count: 20
        },
        {
            name: '朝阳区',
            count: 10
        }
    ]}/>

        <MapvLayer data={[]} options={{}} />

    <Road roadPath={['116.330484,40.031406,116.33124,40.029496,116.33124,40.029496']}/>

    <TrafficLayer />

        </Map>

      </div>
    )
  }
}
 